<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/sort.css" />
		<link rel="stylesheet" type="text/css" href="./icon/font_9hkdikz01js/iconfont.css" />
	</head>
	<body>
		<div class="sort-container">
			<div class="sort-search-box">
				<div class="sort-search">
					<input type="text" name="" id="" value="" placeholder="搜索商品,共10000款好物" />
					<div class="ser-icon"><span class="iconfont icon-fangdajing"></span></div>
				</div>
			</div>
			<div class="sort-content">
				<div class="sort-nav">
				<!-- 	<li>
						<a href="#"><span>女式</span></a>
						<div class="redline disblock"></div>
						
					</li> -->

				</div>
				<div class="sort-detail">
					<div class="sort-detail-c">
					<div class="sort-detail-c-header"><img src="./img/sort_img/03-1分类-女士_03.png" alt=""></div>
				<div class="sort-detail-c-title">
					<div class="sort-detail-c-title-l"></div>
					<div class="sort-detail-c-title-word"><span>女装</span>分类</div>
					<div class="sort-detail-c-title-l"></div>
				</div>
				<div class="sort-detail-cc">
				<!-- 	<li>
						<a href="#"><div class="sort-detail-cc-img"><img src="./img/sort_img/sort_09.png" ></div>
						<div class="sort-detail-cc-name"><span>衬衫</span></div>
					</a>
					</li> -->
				
				</div>
				</div>
				</div>
			</div>
		<div id="tab-bar"></div>
		
		</div>
		



		<script src="./lib/jquery/jquery-3.6.0.min.js"></script>
		<script src="common/tab-bar/js/footNav.js"></script>
		<script>
	$(document).ready(function(){
		//初始化tab
		initTab(2);
		//加载一级分类
		function loadSubcate(id){
			//获取二级分类
			$.getJSON('/api/category/sub',{pId:id},function(res){
				if(res.status){
					var html='';
					res.data.forEach(function(item,index){
						html+=`<li>
					<a href="./serresult.html?cid=${item.id}"><div class="sort-detail-cc-img"><img src="${item.img}" ></div>
					<div class="sort-detail-cc-name"><span>${item.name}</span></div>
				</a>
				</li>`
					})
					$('.sort-detail-cc').html(html);
				}
			})

			}
		$.getJSON('/api/category/sub',{pId:1},function(res){
			if(res.status){
				var html='';
				res.data.forEach(function(item,index){
					html+=`<li data-id='${item.id}'>
						<a href="#"><span>${item.name}</span></a>
						<div class="redline disnone"></div>
						
					</li>`;
				})
				$('.sort-nav').html(html);
			}
			loadSubcate(res.data[0].id);
		})
		
		//加载二级分类--事件委托
		$('.sort-nav').on('click','li',function(){
			//获取当前分类的id
			var cid =$(this).data('id');
				// console.log(cid)
				//修改右侧文字
				$('.sort-detail-c-title-word').find('span').text($(this).text())
				
				$(this).find('a').css({
					'color': '#c55a5c!important'
				})
				$(this).find('.redline').removeClass('disnone').addClass('disblock')
				$(this).siblings().find('.redline').removeClass('disblock').addClass('disnone')
				$(this).siblings().find('a').css({
					'color': '#555!important'
				})

				loadSubcate(cid);
		})
		
		
		
	})
		</script>
	</body>
</html>
